<template>
  <div class="info-card" @click="handleClick">
    <div class="header">
      <span class="left-title">{{ infos.name }}</span>
      <span :class="infos.titleClass">{{ infos.info }}</span>
    </div>
    <div class="content">
      <!-- 合格率 -->
      <div :class="infos.contentClass">
        <div class="card-head">
          <span class="title">合格率</span>
        </div>
        <div class="card-content">
          <div ref="chart" class="card-chart" />
          <div class="card-infos">
            <div class="card-info">合格: {{ infos.nums }}</div>
            <div class="card-info">异常: {{ infos.errs }}</div>
            <div class="card-info">合格率: {{ infos.percent }}</div>
          </div>
        </div>
      </div>
      <!-- 炉温信息和链速信息 -->
      <div class="infos">
        <!-- 炉温信息 -->
        <div :class="infos.tempClass">
          <div class="info-head">炉温</div>
          <div class="info-content">
            <img class="info-img" src="../../../assets/images/temp.png">
            <span class="info-val">{{ infos.temp }}</span>
          </div>
        </div>
        <!-- 链速信息 -->
        <div :class="infos.wheelClass">
          <div class="info-head">链速</div>
          <div class="info-content">
            <img class="info-img" src="../../../assets/images/wheel.png">
            <span class="info-val">{{ infos.wheel }}</span>
          </div>
        </div>
      </div>
      <!-- 氧含量信息和风扇信息 -->
      <div class="infos">
        <!-- 氧含量信息 -->
        <div :class="infos.oxygenClass">
          <div class="info-head">氧含量</div>
          <div class="info-content">
            <img class="info-img" src="../../../assets/images/oxygen.png">
            <span class="info-val">{{ infos.oxygen }}</span>
          </div>
        </div>
        <!-- 风扇信息 -->
        <div :class="infos.elefanClass">
          <div class="info-head">风扇</div>
          <div class="info-content">
            <img class="info-img" src="../../../assets/images/elefan.png">
            <span class="info-val">{{ infos.elefan }}</span>
          </div>
        </div>
      </div>
      <!-- 产能信息和告警信息 -->
      <div class="infos">
        <!-- 产能信息 -->
        <div :class="infos.chartClass">
          <div class="info-head">产能</div>
          <div class="info-content">
            <img class="info-img" src="../../../assets/images/chart.png">
            <span class="info-val">{{ infos.chart }}</span>
          </div>
        </div>
        <!-- 告警信息 -->
        <div :class="infos.warnClass">
          <div class="info-head">告警信息</div>
          <div class="info-content">
            <img class="info-img" src="../../../assets/images/warn.png">
            <span class="warn-val">{{ infos.warn }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'InfoCard',
  props: {
    className: {
      type: String,
      default() {
        return 'info-card'
      }
    },
    date: '',
    infos: {
      type: Object,
      default() {
        return {
          eqid: 0,
          titleClass: 'right-title',
          // 窗口信息
          name: '',
          info: '正常监控',
          // 合格率
          contentClass: 'content-card',
          nums: 0,
          errs: 0,
          percent: '0%',
          // 数据信息
          temp: '正常',
          tempClass: 'info',
          wheel: '正常',
          wheelClass: 'info',
          oxygen: '0ppm',
          oxygenClass: 'info',
          elefan: '正常',
          elefanClass: 'info',
          chart: '0pcs',
          chartClass: 'info',
          warn: '无',
          warnClass: 'info'
        }
      }
    }
  },
  data() {
    return {
      chart: null,
      option: {
        tooltip: {
          trigger: 'item'
        },
        color: ['#02be5f', '#de4f49'],
        series: [
          {
            name: '合格率',
            type: 'pie',
            avoidLabelOverlap: false,
            label: {
              show: false
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            data: [
              { value: 0, name: '合格' },
              { value: 1, name: '不合格' }
            ]
          }
        ]
      }
    }
  },
  created() {
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  destroyed() {
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      let percent1 = 0
      let percent2 = 0
      if (this.infos.nums != null && this.infos.errs != null) {
        let total = (this.infos.nums + this.infos.errs)
        if (total == 0) total = 1
        percent1 = this.infos.nums / total
        percent2 = this.infos.errs / total
      }
      this.chart = echarts.init(this.$refs.chart)
      this.option.series[0].data[0].value = percent1
      this.option.series[0].data[1].value = percent2
      this.setOptions(this.chart, this.option)
    },
    setOptions(chart, option) {
      chart.setOption(option)
    },
    handleClick() {
      this.$router.push({ 
        path: 'equip', 
        query: 
        { 
          id: this.infos.eqid,
          date: this.date,
          name: this.infos.name,
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
$card_black: #262c3c;
$card_header: #282834;
$green_header: #02be5f;
$red_header: #de4f49;
$content_header: #262837;
$content_back: #333647;
.info-card {
  width: calc(25% - 24px);
  height: 420px;
  margin-top: 10px;
  margin-left: 10px;
  background: $card_black;
  display: inline-block;
  border-radius: 3px;
  .header {
    padding: 10px;
    height: 36px;
    background: $card_header;
    .left-title {
      float: left;
      color: #7e7e8a;
      font-size: 16px;
    }
    .right-title {
      float: right;
      color: #02be5f;
      font-size: 16px;
    }
    // 警告样式
    .right-title-warn {
      @extend .right-title;
      color: $red_header;
    }
  }
  .content {
    .content-card {
      width: 70%;
      margin: 10px auto;
      border: transparent 1px solid;
      box-sizing: border-box;
      .card-head {
        background: $card_header;
        text-align: center;
        .title {
          display: inline-block;
          font-size: 10px;
          color: #7e7e8a;
        }
      }
      .card-content {
        background: $content_back;
        .card-chart {
          width: 80px;
          height: 80px;
          float: left;
        }
        .card-infos {
          padding: 10px 15px;
          display: inline-block;
          height: 80px;
          .card-info {
            font-size: 14px;
            color: $green_header;
            padding-bottom: 5px;
            &:nth-child(3) {
              padding-bottom: 0;
            }
          }
        }
      }
    }
    // 警告样式
    .content-card-warn {
      @extend .content-card;
      border: $red_header 1px solid;
      box-sizing: border-box;
      .card-head {
        background: $red_header;
        .title {
          color: #ffffff;
        }
      }
      .card-content {
        .card-infos {
          .card-info {
            color: $red_header;
          }
        }
      }
    }
    .infos {
      display: flex;
      margin-bottom: 10px;
      .info {
        flex: 1;
        margin: 0 8px;
        border: transparent 1px solid;
        box-sizing: border-box;
        .info-head {
          background: $card_header;
          text-align: center;
          font-size: 14px;
          color: #7e7e8a;
          padding: 5px 0;
        }
        .info-content {
          background: $content_back;
          padding: 10px;
          text-align: center;
          position: relative;
          .info-img {
            float: left;
            position: absolute;
            width: 36px;
            height: 36px;
            left: 0;
            top: 0;
          }
          .info-val {
            font-size: 18px;
            color: $green_header;
          }
          .warn-val {
            font-size: 18px;
            color: #7e7e8a;
          }
        }
      }
      // 警告样式
      .info-warn {
        @extend .info;
        border: $red_header 1px solid;
        box-sizing: border-box;
        .info-head {
          background: $red_header;
          color: #ffffff;
        }
        .info-content {
          .info-val {
            font-size: 18px;
            color: $red_header;
          }
          .warn-val {
            font-size: 18px;
            color: $red_header;
          }
        }
      }
    }
  }
}
</style>
